<template>
	<view>
		<navbar>外边距</navbar>
		<view :class="c_card">
			<view :class="c_title1">规则</view>
			<view class="b-b1"></view>
			<view class="c-999 mt-20">
				<text :class="c_strong">m-xx-a(0~50):</text>{margin:(0~50)rpx auto;}/* 上下边距，左右居中 */
			</view>
			<view class="c-999 mt-20">
				<text :class="c_strong">mt-xx(0~50):</text>{margin-top:(0~50)rpx;}/* 上外边距 */
			</view>
			<view class="c-999 mt-20">
				<text :class="c_strong">ml-xx(0~50):</text>{margin-left:(0~50)rpx;}/* 左外边距 */
			</view>
			<view class="c-999 mt-20">
				<text :class="c_strong">mr-xx(0~50):</text>{margin-right:(0~50)rpx;}/* 右外边距 */
			</view>
			<view class="c-999 mt-20">
				<text :class="c_strong">mt-xx(0~50):</text>{margin-bottom:(0~50)rpx;}/* 下外边距 */
			</view>
			<view class="pb-32 b-b1"></view>
			<view class="mt-32">
				举例:
			</view>
			<view class="mt-20">
				<view>
					<view>box：class="<text class="fw-b c-red">m-0-a</text>"</view>
					<view class="w-150 h-150 bg-f1 c-fff b-1 mt-20">
						<view class="h-80 w-80 dp-fc m-0-a bg-999 b-2">box</view>
					</view>
				</view>
				<view class="pb-20 b-b1"></view>
				<view class="mt-20">
					<view>box：class="<text class="fw-b c-red">mt-20</text>"</view>
					<view class="w-150 h-150 bg-f1 c-fff b-1">
						<view class="h-80 w-80 dp-fc mt-20 bg-999 b-2">box</view>
					</view>
				</view>
				<view class="pb-20 b-b1"></view>
				<view class="mt-20">
					<view>box：class="<text class="fw-b c-red">ml-20</text>"</view>
					<view class="w-150 h-150 bg-f1 c-fff b-1">
						<view class="h-80 w-80 dp-fc ml-20 bg-999 b-2">box</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		mounted() {},
		methods: {}
	};
</script>

<style lang="scss" scoped></style>
